<template>
  <div class="aboutAce flex justify-start">
    <div class="left">
      <img
        src="@/assets/images/home/mobilePhone.png"
        alt=""
        class="mobilePhone"
      />
    </div>
    <div class="right">
      <h3 class="text-2xl font-bold">{{ $t("ace.aboutAce") }}</h3>
      <br />
      <p>
        {{ $t("ace.ACE") }}
        {{ $t("ace.aceTip") }}
      </p>
      <br />
      <p>
        {{ $t("ace.aceTip1") }}
        {{ $t("ace.aceTip2") }}
      </p>
    </div>
  </div>
  <div class="iconList">
    <ul class="flex justify-between">
      <li
        v-for="(item, index) of list"
        :key="index"
        class="flex flex-col justify-start align-center"
      >
        <div class="imgDiv">
          <img :src="item.imgUrl" alt="" />
        </div>
        <span class="text-xl mt-3"
          >{{ item.num }}
          <el-icon class="iconStyle"><Plus /></el-icon>
        </span>
        <span class="text-xs text-[#728091] mt-1">{{ item.text }}</span>
      </li>
    </ul>
  </div>
  <Singapore />
</template>
<script setup>
import { Plus } from "@element-plus/icons-vue";
import Singapore from "./Singapore.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { ref } from "vue";
import logo1 from "@/assets/images/aboutAce/1.png";
import logo2 from "@/assets/images/aboutAce/2.png";
import logo3 from "@/assets/images/aboutAce/3.png";
import logo4 from "@/assets/images/aboutAce/4.png";
import logo5 from "@/assets/images/aboutAce/5.png";
import logo6 from "@/assets/images/aboutAce/6.png";
import logo7 from "@/assets/images/aboutAce/7.png";
import logo8 from "@/assets/images/aboutAce/8.png";
const list = ref([
  {
    num: 10000,
    text: `${t("ace.voyage")}`,
    imgUrl: logo1,
  },
  {
    num: 100,
    text: "100 million searches",
    imgUrl: logo2,
  },
  {
    num: 300,
    text: `${t("ace.Airline")}`,
    imgUrl: logo3,
  },
  {
    num: 200000,
    text: `${t("ace.ServingGlobal")}`,
    imgUrl: logo4,
  },
  {
    num: 80000,
    text: `${t("ace.QPS")}`,
    imgUrl: logo5,
  },
  {
    num: 90,
    text: `${t("ace.satisfaction")}`,
    imgUrl: logo6,
  },
  {
    num: 30,
    text: `${t("ace.checkIn")}`,
    imgUrl: logo7,
  },
  {
    num: 50,
    text: `${t("ace.global")}`,
    imgUrl: logo8,
  },
]);
</script>
<style scoped lang="scss">
.aboutAce {
  width: 100vw;
  height: 330px;
  margin-top: 100px;
  background-color: #f2f7fe;
  box-sizing: border-box;
  .left {
    position: relative;
    height: 100%;
    width: 35%;
    .mobilePhone {
      width: 300px;
      height: 400px;
      position: absolute;
      right: 0;
      top: -25%;
      z-index: 111;
    }
  }
  .right {
    width: 48%;
    box-sizing: border-box;
    padding: 3% 2% 2%;
  }
}
.iconList {
  margin-top: 2px;
  ul {
    li {
      flex: 1;
      margin-right: 2px;
      height: 180px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ddecfc;
      border-radius: 20px;
      .imgDiv {
        height: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
        }
      }
      .iconStyle {
        font-size: 8px;
        color: #000;
      }
    }
  }
  ul > :nth-child(2) {
    background: #0373c1;
    color: #fff;
    .iconStyle {
      color: #fff;
    }
    span {
      color: #fff;
    }
  }
}
</style>
